<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒体查询-link</title>
  <!-- 视口宽度 小于等于 768px, 网页背景色是粉色 -->
  <link rel="stylesheet" media="(max-width: 768px)" href="./css/pink.css">

  <!-- 视口宽度 大于等于 1200px, 网页背景色是绿色 -->
  <link rel="stylesheet" media="(min-width: 1200px)" href="./css/green.css">
</head>
<body>
  
</body>
</html>